<template>
  <div class="main-box content-box">
    <EcoTable :columns="columns" :pagination="true" :request-api="TestApi.getList">
      <template #tableHeader="scope">
        <el-button type="primary" icon="CirclePlus">新增</el-button>
        <el-button type="primary" icon="Upload" plain>导入</el-button>
        <el-button type="primary" icon="Download" plain>导出</el-button>
        <el-button type="danger" icon="Delete" plain :disabled="!scope.isSelected">批量删除</el-button>
      </template>
      <template #operation>
        <el-button type="primary" link icon="View">查看</el-button>
        <el-button type="primary" link icon="EditPen">编辑</el-button>
        <el-button type="primary" link icon="Delete">删除</el-button>
      </template>
    </EcoTable>
  </div>
</template>

<script lang="tsx" setup>
import TestApi from '@/api/test'
const columns: EcoTable.Column<any>[] = reactive([
  { type: 'selection', prop: 'selection', fixed: 'left', width: 60 },
  { type: 'index', label: '#', width: 60 },
  { type: 'sort', label: 'Sort', width: 80 },
  { type: 'expand', prop: 'expand', label: 'Expand', width: 80 },
  {
    prop: 'userName',
    label: '用户姓名',
    search: { eTag: 'input' },
    render: scope => {
      return (
        <el-button type="primary" link onClick={() => ElMessage.success('我是通过 tsx 语法渲染的内容')}>
          {scope.row.userName}
        </el-button>
      )
    }
  },
  {
    prop: 'gender',
    label: '性别',
    tag: true,
    enum: [
      { genderLabel: '男', genderValue: '1', tagType: 'primary' },
      { genderLabel: '女', genderValue: '0', tagType: 'warning' }
    ],
    fieldNames: { label: 'genderLabel', value: 'genderValue' },
    search: { eTag: 'select', props: { filterable: true } }
  },
  {
    prop: 'age',
    label: '年龄',
    search: {
      // 自定义 search 显示内容
      render: ({ model }) => {
        return (
          <div class="flx-center">
            <el-input vModel_trim={model.minAge} placeholder="最小年龄" />
            <span style="margin: 0 10px">-</span>
            <el-input vModel_trim={model.maxAge} placeholder="最大年龄" />
          </div>
        )
      }
    }
  },
  { prop: 'email', label: '邮箱' },
  {
    prop: 'createTime',
    label: '创建时间',
    headerRender: scope => {
      return (
        <el-button type="primary" onClick={() => ElMessage.success('我是通过 tsx 语法渲染的表头')}>
          {scope.column.label}
        </el-button>
      )
    },
    width: 180,
    search: {
      eTag: 'date-picker',
      span: 2,
      props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
    }
  },
  {
    prop: 'operation',
    label: '操作',
    fixed: 'right',
    width: 220
  }
])
</script>
<style lang="scss" scoped></style>
